<template>
  <view>
    <view class="top-container">
      <view class="mendian-right">
        <picker @change="bindPickerChange" :value="mendianIndex" :range="mendianList" range-key="name">
          <view class="uni-input">
            {{mendianList[mendianIndex].name}}
            <image style="width: 20px; height: 20px; margin-left: 10px; align-items: center" src="/static/img/address3.png"></image>
          </view>
        </picker>
      </view>
      <view class="main-date">
        <scroll-view style="white-space: nowrap;" scroll-x="true">
          <view class="date-item" :class="{active:dateIndex===item.day}" v-for="(item,index) in check" :key="index"
                @click="selectDate(item);dateIndex = item.day">
            <view class="item-name">{{item.name}}</view>
            <view class="item-date">{{item.date}}</view>
          </view>
        </scroll-view>
      </view>
      <view class="kecheng-type">
        <view class="class-btn" v-for="(item, index) in prolist" :key="index">
          <button class="btn" :class="{btnActive:prolistIndex===index}" @click="prolistClick(index)">{{item.name}}</button>
        </view>
      </view>
    </view>

    <view>
      <view v-for="(item, index) in kechengList" :key="index" class="container">
        <view class="top-image">
          <image style="width: 50px; height: 50px; border-radius: 50%" :src="item.pic"
                 mode="aspectFill"></image>
        </view>

        <view class="center-body">
          <view style="margin-top: 5px">
            <text style="font-weight: bold; font-size: 16px">{{item.name}}</text>
          </view>
          <view style="margin-top: 3px">
            <text style="font-size: 12px">{{item.teacher[0].realname}}</text>
          </view>
          <view style="margin-top: 3px">
            <text style="font-size: 10px;color: #cccccc">{{numToTime(item.zaohour) + "-" + numToTime(item.wanhour)}}</text>
            <image style="width: 10px; height: 10px; margin-left: 10px; align-items: center" src="/static/img/clock.png"></image>
            <text style="font-size: 10px; margin-left: 5px">{{item.timejg}}分钟</text>
          </view>
        </view>

        <view class="end-body">
          <button class="yybtn" @click="godetail(item.id)">立即预约</button>
          <view style="margin-top: 5px; margin-right: 15px; display: flex; float: right">
            <text style="font-size: 12px;color: #cccccc">预约</text>
            <text style="font-size: 12px">{{item.sales}}</text>
            <text style="font-size: 12px;color: #cccccc">/{{item.yynum}}</text>
          </view>
        </view>
      </view>
    </view>

    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      opt:{},
      mendianList: [],
      mendianIndex: 0,
      prolist: [],
      prolistIndex: 0,
      cid: 0,
      dateIndex:"0",
      check:[],
      kechengList: [],
      yydate: "",
      week: ""
    };
  },

  onLoad: async function (opt){
    this.opt = app.getopts(opt);
    await this.getProlist();
    this.getMendian();
    this.getWeek();
  },

  methods: {
    getMendian: function () {
      var that = this;
      app.get("/ApiIndex/mendianlist", {}, function (res) {
        that.mendianList = res.data;
        console.log("门店列表：", that.mendianList)
      })
    },

    getProlist: async function () {
      var that = this;
      await app.get("/ApiYuyue/prolist", {}, function (res) {
        that.prolist = res.clist;
        that.cid = that.prolist[0].id;
        that.getKechengList(that.yydate, that.cid, that.week)
        console.log("课程分类：", that.prolist)
      })
    },

    getKechengList(date, cid, week) {
      var that = this;
      app.get("/ApiYuyue/getprolist", {date: date, cid: cid, week: week}, function (res) {
        that.kechengList = res.data;
        console.log("课程列表：", that.kechengList)
      })
    },

    prolistClick: function (index){
      this.prolistIndex = index;
      this.cid = this.prolist[index].id

      this.getKechengList(this.yydate, this.cid, this.week)
    },

    bindPickerChange: function(e) {
      this.mendianIndex = e.detail.value
    },

    // 选择日期
    selectDate(item) {
      var date = item.year + "年" + String(item.month).padStart(2, '0') + "月" +String(item.day).padStart(2, '0')
      this.yydate = date
      this.week = item.weekday;
      this.getKechengList(date, this.cid, item.weekday)
    },
    // 获取未来一周的日期,星期
    getWeek() {
      this.check = []; // 清空数组
      var now = new Date();
      for (let i = 0; i < 30; i++) {
        var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        var weekDays = ["7", "1", "2", "3", "4", "5", "6"];

        var displayName = weekDay[date.getDay()];
        if (i === 0){
          this.dateIndex = day;
          this.week = weekDays[date.getDay()];
          this.selectDate({
            year: year,
            month: month,
            day: day,
            weekday: weekDays[date.getDay()],
          })
        }

        this.check.push({
          datatime: date,
          date: month + "-" + day,
          year: year,
          month: month,
          day: day,
          weekday: weekDays[date.getDay()],
          name: displayName
        });
      }
      console.log("获取到的时间段是", this.check);
    },



    numToTime(num){
      let hours = num;
      let minutes = 0;
      let secs = 0;
      return [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        secs.toString().padStart(2, '0')
      ].join(':');
    },

    godetail(id){
      app.goto("/activity/yuyue/product?id="+id + "&yydate="+this.yydate);
    }
  }
};
</script>
<style lang="scss">
.top-container {
  height: 140px;
  width: 100%;
  background-color: white;
}

.mendian{
  height: 20px;
  width: 100%;
  border-bottom: 1px solid #B8B8B8;
}

.mendian-text{
  font-size: 14px;
  display: flex;
  float: right;
  margin-right: 30px;
  align-items: center;
  font-weight: bold;
}

.mendian-right{
  text-align: right;
  padding-right: 20px;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #B8B8B8;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.main-date {
  background: #fff;
  text-align: center;
  padding: 0 32rpx;
  border-bottom: 1px solid #B8B8B8;
  height: 60px;
  width: 100%;

  .date-item {
    display: inline-block;
    padding: 18rpx 0 18rpx;
    margin-left: 32rpx;
    border-bottom: 4rpx solid transparent;

    &:first-child {
      margin-left: 0;
    }

    .item-name {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #333333;
    }

    .item-date {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #333333;
      margin-top: 18rpx;
    }

    &.active {

      .item-name,
      .item-date {
        color: rgba(251, 122, 38, 1);
      }
    }
  }
}

.kecheng-type{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-items: center;
  height: 40px;
}
.class-btn{
  display: flex;
  align-items: center;
  justify-items: center;
  width: 50%;
}

.btn{
  width: 150px;
  border: none;
  padding: 0;
  align-items: center;
  justify-items: center;
}

.btnActive{
  background-color: darksalmon;
  border-radius: 20px;
  color: #FFFFFF;
}

.container{
  margin: 10px 5% 10px 5%;
  width: 90%;
  height: 80px;
  border-radius: 4px;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.08);
  background-color: #FFFFFF;
  display: flex;
}

.top-image{
  height: 80px;
  width: 80px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-items: center;
}

.center-body{
  height: 80px;
  width: 250px;
}
.end-body{
  height: 80px;
}

.yybtn{
  margin-top: 20px;
  margin-right: 10px;
  width: 80px;
  height: 30px;
  font-size: 12px;
  border: none;
  background-color: lightsalmon;
  border-radius: 20px;
  color: #FFFFFF;
}

</style>
